<template>
<div class="home">
    <Header><span slot="login" class="login" @click="gologin" >登录</span>
    <span slot="register" class="register" @click="goregister">注册</span></Header>
    <ul class="product_r">
      <li v-for="item in list" :key="item._id" @click="godetail(item._id)">
        <img :src="item.coverImg" alt="" />
        <div class="product_r">
          <h3>{{ item.name }}</h3>
          <p>{{ item.price }}</p>
        </div>
      </li>
    </ul>
</div>
</template>
<script>
import Header from '../../components/Header/Header.vue'
import { reqProducts } from "../../api/reqProducts";
export default {
data() {
return {
    list:[],
};
},
computed: {},
watch: {},

created() {
    this.init();
},
methods: {
    async init() {
      const result = await reqProducts({
        per:50,
        page:1,
      });
      console.log(result);
      this.list = result.products;
    },
    gologin(){
        this.$router.push("/login");
    },
    goregister(){
        this.$router.push("/register");
    },
    godetail(id){
        this.$router.push("/detail/" + id);
    }
},
mounted() {},
components: {
    Header,
},
};
</script>
<style scoped>
.home {
  padding-bottom: 40px;
}
.product_r li {
  display: flex;
  padding: 10px;
}
.product_r li img {
  width: 80px;
  height: 80px;
  display: block;
}
.product_r li .product_r {
  flex: 1;
  padding-left: 10px;
}
.product_r li .product_r h3 {
  font-size: 13px;
  color: #888;
}
</style>